<template>
    <el-card>
        <el-tabs v-model="activeName">
            <el-tab-pane label="阿里短信" name="alisms">
                <alisms-info-form ref="alismsInfo" :info="aliInfo" />
            </el-tab-pane>
            <el-tab-pane label="微信配置" name="wxconfig">
                <wxconfig-info-form ref="wxconfigInfo" :info="wxConfigInfo" />
            </el-tab-pane>
        </el-tabs>
        <el-form label-width="100px">
            <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="close()">返回</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import {getAliSms,updateAliSms } from "@/api/projects/AliSms";
import {getWechatConfig,updateWechatConfig } from "@/api/projects/WechatConfig";
import aliInfoForm from "../AliSms/aliInfoForm.vue";
import wxConfigForm from "../WechatConfig/wxConfigInfoForm.vue";

export default {
    name:"threeConfig",
    components: {
        'alisms-info-form': aliInfoForm,
        'wxconfig-info-form': wxConfigForm
    },
    data() {
    return {
      // 选中选项卡的 name
      activeName: "alisms",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表详细信息
      aliInfo: {},
      wxConfigInfo:{}
    };
  },
  created() {
      // 添加错误处理
      getAliSms(1).then(res => {
        if (res.data) {
            this.aliInfo = res.data;
        } else {
            this.$modal.msgError('阿里短信配置数据加载失败');
        }
      }).catch(error => {
        this.$modal.msgError('获取阿里短信配置失败：' + error.message);
      });

      getWechatConfig(1).then(res => {
        if (res.data) {
            this.wxConfigInfo = res.data;
        } else {
            this.$modal.msgError('微信配置数据加载失败');
        }
      }).catch(error => {
        this.$modal.msgError('获取微信配置失败：' + error.message);
      });
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
        // 首先验证引用是否存在
        if (!this.$refs.alismsInfo || !this.$refs.wxconfigInfo) {
            this.$modal.msgError('表单组件未正确加载');
            return;
        }

        const alismsForm = this.$refs.alismsInfo.$refs.alismsInfoForm;
        const wxconfigForm = this.$refs.wxconfigInfo.$refs.wxconfigInfoForm;
        
        if (!alismsForm || !wxconfigForm) {
            this.$modal.msgError('表单实例未找到');
            return;
        }
        
        Promise.all([alismsForm, wxconfigForm].map(this.getFormPromise)).then(res => {
            const validateResult = res.every(item => !!item);
            if (validateResult) {
                Promise.all([
                    updateAliSms(this.aliInfo),
                    updateWechatConfig(this.wxConfigInfo)
                ]).then(([alismsRes, wxconfigRes]) => {
                    this.$modal.msgSuccess('保存成功');
                }).catch(error => {
                    this.$modal.msgError('保存失败：' + error.message);
                });
            } else {
                this.$modal.msgError("表单校验未通过，请重新检查提交内容");
            }
        });
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        });
      });
    },
  },
}
</script>














